<template>
  <view :class="s.remarkItem">
      <text :class="s.realname">{{user.realname}}：</text>
      {{user.content}}
  </view>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, reactive, toRefs } from "vue";
import Taro from "@tarojs/taro"
import {getCurrentInstance} from "@tarojs/taro"

export default defineComponent({
    props:{
        commentId:{
            type:Number,
            defaule:0
        }
    },
    setup(props){
        let remarkItemData = reactive({
            user:{}
        })
        onBeforeMount(()=>{
            getRemarkItemData()
        })
        async function getRemarkItemData(){
            let blogId:string|undefined = getCurrentInstance().router?.params.id
            let data = await Taro.request({
                url:"https://www.ttzxh.icu/api/recomment/search",
                data:{
                    blogId,
                    commentId:props.commentId
                }
            })
            if(data.data.error===-1){
                remarkItemData.user = data.data.data[0]
            }

        }
        return {
            ...toRefs(remarkItemData)
        }
    }
})
</script>

<style lang="scss" module="s">
.remarkItem{
    margin-top: 9px;
    padding-top: 9px;
    font-size: 14Px;
    border-top: 1px solid #ddd;
    border-radius: 20Px;
        background-color: #eef;

    .realname{
        margin-left: 14Px;
    color: #54b4ef;
}
}


</style>